<template>
  <t-dialog v-model:visible="formVisible" header="新增或编辑线索" width="1080" :footer="false" @close="onClickCloseBtn">
    <template #body>
      <!-- 表单内容 -->
      <t-form ref="form" :data="formData" :rules="rules" :label-width="100" layout="inline" @submit="onSubmit">
        <t-form-item label="名称" name="projectName">
          <t-input v-model="formData.projectName" />
        </t-form-item>
        <t-form-item label="简称" name="projectShortName">
          <t-input v-model="formData.projectShortName" />
        </t-form-item>
        <t-form-item label="成立时间" name="projectFoundingTime">
          <t-date-picker v-model="formData.projectFoundingTime" />
        </t-form-item>
        <t-form-item label="成立年数" name="projectFoundingTimeYear">
          <t-input-number v-model="formData.projectFoundingTimeYear" theme="normal" suffix="年" />
        </t-form-item>
        <t-form-item label="年收入" name="projectIncomeYearMoney">
          <t-input-number v-model="formData.projectIncomeYearMoney" theme="normal" suffix="万元/年" />
        </t-form-item>
        <t-form-item label="年利润" name="projectProfitYearMoney">
          <t-input-number v-model="formData.projectProfitYearMoney" theme="normal" suffix="万元/年" />
        </t-form-item>
        <t-form-item label="叫价" name="projectSellingPriceMoney">
          <t-input-number v-model="formData.projectSellingPriceMoney" theme="normal" suffix="万元" />
        </t-form-item>

        <t-form-item label="区域" name="projectAreaCode">
          <t-cascader
            v-model="formData.projectAreaCode"
            :options="options"
            showAllLevels
            :keys="{ value: 'code', label: 'name' }"
            @change="
              (val, ctx) => {
                console.log('val', val, 'ctx', ctx);
                console.log('ctx.node.data', ctx.node.data);
                formData.projectAreaName = ctx.node.data.name;
                // 市
                // @ts-ignore
                console.log('ctx.node.city', ctx.node['__tdesign_tree-node__'].parent);
                // @ts-ignore
                formData.projectCityCode = ctx.node['__tdesign_tree-node__'].parent.data.code;
                // @ts-ignore
                formData.projectCityName = ctx.node['__tdesign_tree-node__'].parent.data.name;
                // 省
                // @ts-ignore
                console.log('ctx.node', ctx.node['__tdesign_tree-node__'].parent.parent);
                // @ts-ignore
                formData.projectProvinceCode = ctx.node['__tdesign_tree-node__'].parent.parent.data.code;
                // @ts-ignore
                formData.projectProvinceName = ctx.node['__tdesign_tree-node__'].parent.parent.data.name;
              }
            "
          />
        </t-form-item>
        <t-form-item label="行业" name="projectIndustryValue">
          <t-select
            v-model="formData.projectIndustryValue"
            @change="
              (val, ctx) => {
                console.log('val', val, 'ctx', ctx);
                formData.projectIndustryLabel = ctx.option.label;
              }
            "
          >
            <t-option v-for="item in projectIndustrys" :key="item.value" :value="item.value" :label="item.label" />
          </t-select>
        </t-form-item>
        <t-form-item label="类型" name="projectTypeValue">
          <t-select
            v-model="formData.projectTypeValue"
            @change="
              (val, ctx) => {
                console.log('val', val, 'ctx', ctx);
                formData.projectTypeLabel = ctx.option.label;
              }
            "
          >
            <t-option v-for="item in projectTypes" :key="item.value" :value="item.value" :label="item.label" />
          </t-select>
        </t-form-item>
        <t-form-item label="员工人数" name="projectEmployeesNumber">
          <t-input-number v-model="formData.projectEmployeesNumber" theme="normal" suffix="人" />
        </t-form-item>
        <t-form-item label="出售原因" name="projectSellReasonValue">
          <t-select
            v-model="formData.projectSellReasonValue"
            @change="
              (val, ctx) => {
                console.log('val', val, 'ctx', ctx);
                formData.projectSellReasonLabel = ctx.option.label;
              }
            "
          >
            <t-option v-for="item in projectSellReasons" :key="item.value" :value="item.value" :label="item.label" />
          </t-select>
        </t-form-item>
        <t-form-item label="出售股份比例" name="projectSellSharesProportion">
          <t-input-number v-model="formData.projectSellSharesProportion" theme="normal" suffix="%" />
        </t-form-item>
        <!--        <t-form-item label="线索状态" name="projectStatusValue">-->
        <!--          <t-select-->
        <!--            v-model="formData.projectStatusValue"-->
        <!--            @change="-->
        <!--              (val, ctx) => {-->
        <!--                console.log('val', val, 'ctx', ctx);-->
        <!--                formData.projectStatusLabel = ctx.option.label;-->
        <!--              }-->
        <!--            "-->
        <!--          >-->
        <!--            <t-option v-for="item in projectStatuss" :key="item.value" :value="item.value" :label="item.label" />-->
        <!--          </t-select>-->
        <!--        </t-form-item>-->
        <!--        <t-form-item label="交易状态" name="projectTradingStatusValue">-->
        <!--          <t-select-->
        <!--            v-model="formData.projectTradingStatusValue"-->
        <!--            @change="-->
        <!--              (val, ctx) => {-->
        <!--                console.log('val', val, 'ctx', ctx);-->
        <!--                formData.projectTradingStatusLabel = ctx.option.label;-->
        <!--              }-->
        <!--            "-->
        <!--          >-->
        <!--            <t-option v-for="item in projectTradingStatuss" :key="item.value" :value="item.value" :label="item.label" />-->
        <!--          </t-select>-->
        <!--        </t-form-item>-->
        <t-form-item label="身份" name="projectUserTypeValue">
          <t-select
            v-model="formData.projectUserTypeValue"
            @change="
              (val, ctx) => {
                console.log('val', val, 'ctx', ctx);
                formData.projectUserTypeLabel = ctx.option.label;
              }
            "
          >
            <t-option v-for="item in projectUserTypes" :key="item.value" :value="item.value" :label="item.label" />
          </t-select>
        </t-form-item>
        <t-form-item label="排序" name="projectSort">
          <t-input-number v-model="formData.projectSort" theme="normal" />
        </t-form-item>
        <t-form-item label="用户称呼" name="projectUserName">
          <t-input v-model="formData.projectUserName" />
        </t-form-item>
        <t-form-item label="用户电话" name="projectUserMobile">
          <t-input v-model="formData.projectUserMobile" />
        </t-form-item>
        <t-form-item label="用户年龄" name="projectUserAge">
          <t-input-number v-model="formData.projectUserAge" theme="normal" suffix="岁" />
        </t-form-item>
        <!--        <t-form-item label="微信用户" name="projectWechatUserNickName">-->
        <!--          <t-input v-model="formData.projectWechatUserNickName" />-->
        <!--        </t-form-item>-->
        <!--        <t-form-item label="微信用户电话" name="projectWechatUserMobile">-->
        <!--          <t-input v-model="formData.projectWechatUserMobile" />-->
        <!--        </t-form-item>-->
        <t-form-item label="公司介绍" name="projectCorporationDesc">
          <t-textarea v-model="formData.projectCorporationDesc" />
        </t-form-item>
        <t-form-item label="生意亮点" name="projectBusinessHighlightDesc">
          <t-textarea v-model="formData.projectBusinessHighlightDesc" />
        </t-form-item>
        <t-form-item label="运营情况" name="projectOperationSituationDesc">
          <t-textarea v-model="formData.projectOperationSituationDesc" />
        </t-form-item>
        <t-form-item label="其他信息" name="projectOtherDesc">
          <t-textarea v-model="formData.projectOtherDesc" />
        </t-form-item>

        <t-form-item style="float: right">
          <t-button variant="outline" @click="onClickCloseBtn">取消</t-button>
          <t-button theme="primary" type="submit">确定</t-button>
        </t-form-item>
      </t-form>
    </template>
  </t-dialog>
</template>

<script setup lang="tsx">
import { FormRules, MessagePlugin, SubmitContext } from 'tdesign-vue-next';
import { onMounted, PropType, ref, watch } from 'vue';

import { post, saveOrUpdate } from '@/api/common';

import addressJson from './pca-code.json';

const options = addressJson;

const projectIndustrys = ref([
  { label: '商业服务', value: 0 },
  { label: '制造业', value: 1 },
  { label: '零售', value: 2 },
  { label: '特许经销权', value: 3 },
  { label: '科技', value: 4 },
  { label: '医疗', value: 5 },
  { label: '消费者服务', value: 6 },
  { label: '软件', value: 7 },
  { label: '运输', value: 8 },
  { label: '媒体', value: 9 },
  { label: '保险', value: 10 },
  { label: '餐饮', value: 11 },
  { label: '房地产', value: 12 },
  { label: '批发', value: 13 },
  { label: '公共事业', value: 14 },
  { label: '其他', value: 15 },
]);

const projectTypes = ref([
  { label: '轻资产企业', value: 0 },
  { label: '重资产企业', value: 1 },
  { label: '数字资产企业', value: 2 },
  { label: '线下门店', value: 3 },
]);

const projectSellReasons = ref([
  { label: '退休', value: 0 },
  { label: '发展新事业', value: 1 },
  { label: '个人原因', value: 2 },
]);

const projectStatuss = ref([
  { label: '审核中', value: 0 },
  { label: '未通过', value: 1 },
  { label: '已发布', value: 2 },
]);

// const projectTradingStatuss = ref([
//   { label: '交易中', value: 0 },
//   { label: '已成交', value: 1 },
//   { label: '已下架', value: 2 },
//   { label: '已售出', value: 3 },
// ]);

const projectUserTypes = ref([
  { label: '企业主', value: 0 },
  { label: '股东', value: 1 },
]);

export interface FormData {
  projectId: number;
  projectUuid: string;
  projectName: string;
  projectShortName: string;
  projectIncomeYearMoney: number;
  projectProfitYearMoney: number;
  projectFoundingTime: string;
  projectFoundingTimeYear: number;
  projectProvinceName: string;
  projectProvinceCode: string;
  projectCityName: string;
  projectCityCode: string;
  projectAreaName: string;
  projectAreaCode: string;
  projectSellingPriceMoney: number;
  projectIndustryLabel: string;
  projectIndustryValue: number;
  projectTypeLabel: string;
  projectTypeValue: number;
  projectEmployeesNumber: number;
  projectSellReasonLabel: string;
  projectSellReasonValue: number;
  projectSellSharesProportion: number;
  projectCorporationDesc: string;
  projectBusinessHighlightDesc: string;
  projectOperationSituationDesc: string;
  projectOtherDesc: string;
  projectStatusLabel: string;
  projectStatusValue: number;
  // projectTradingStatusLabel: string;
  // projectTradingStatusValue: number;
  projectUserName: string;
  projectUserAge: number;
  projectUserMobile: string;
  projectUserTypeLabel: string;
  projectUserTypeValue: number;
  // projectWechatUserNickName: string;
  // projectWechatUserMobile: string;
  projectSort: number;
}

const INITIAL_DATA: FormData = {
  projectId: null,
  projectUuid: null,
  projectName: '',
  projectShortName: '',
  projectIncomeYearMoney: null,
  projectProfitYearMoney: null,
  projectFoundingTime: '',
  projectFoundingTimeYear: null,
  projectProvinceName: '',
  projectProvinceCode: '',
  projectCityName: '',
  projectCityCode: '',
  projectAreaName: '',
  projectAreaCode: '',
  projectSellingPriceMoney: null,
  projectIndustryLabel: '',
  projectIndustryValue: null,
  projectTypeLabel: '',
  projectTypeValue: null,
  projectEmployeesNumber: null,
  projectSellReasonLabel: '',
  projectSellReasonValue: null,
  projectSellSharesProportion: null,
  projectCorporationDesc: '',
  projectBusinessHighlightDesc: '',
  projectOperationSituationDesc: '',
  projectOtherDesc: '',
  projectStatusLabel: '',
  projectStatusValue: null,
  // projectTradingStatusLabel: '',
  // projectTradingStatusValue: null,
  projectUserName: '',
  projectUserAge: null,
  projectUserMobile: '',
  projectUserTypeLabel: '',
  projectUserTypeValue: null,
  // projectWechatUserNickName: '',
  // projectWechatUserMobile: '',
  projectSort: null,
};

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: Object as PropType<FormData>,
});

onMounted(async () => {
  const r: any = await post('/dictItem/dictTypeMapList', {
    keys: [
      'project_industry',
      'project_type',
      'project_sell_reason',
      'project_status',
      // 'project_trading_status',
      'project_user_type',
    ],
  });
  console.log('r', r);
  projectIndustrys.value = r.project_industry;
  projectTypes.value = r.project_type;
  projectSellReasons.value = r.project_sell_reason;
  projectStatuss.value = r.project_status;
  // projectTradingStatuss.value = r.project_trading_status;
  projectUserTypes.value = r.project_user_type;
});

const formVisible = ref(false);
const formData = ref({ ...INITIAL_DATA });

const onSubmit = async ({ validateResult, firstError }: SubmitContext) => {
  if (!firstError) {
    await saveOrUpdate('/project/saveOrUpdate', formData.value);
    MessagePlugin.success('提交成功');
    formVisible.value = false;
    // await emit.refreshTable();
    await emit('refreshTable');
  } else {
    console.log('Errors: ', validateResult);
    MessagePlugin.warning(firstError);
  }
};

const onClickCloseBtn = () => {
  formVisible.value = false;
  formData.value = { ...INITIAL_DATA };
  console.log(`onClickCloseBtn`);
};

const emit = defineEmits(['update:visible', 'refreshTable']);
// const emit = defineEmits<{
//   'update:visible': void;
//   refreshTable: void;
// }>();

watch(
  () => formVisible.value,
  (val) => {
    emit('update:visible', val);
  },
);

watch(
  () => props.visible,
  (val) => {
    formVisible.value = val;
  },
);

watch(
  () => props.data,
  (val) => {
    formData.value = val;
  },
);

const rules: FormRules = {
  projectName: [{ required: true, message: '请输入', type: 'error' }],
  projectShortName: [{ required: true, message: '请输入', type: 'error' }],
  projectIncomeYearMoney: [{ required: true, message: '请输入', type: 'error' }],
  projectProfitYearMoney: [{ required: true, message: '请输入', type: 'error' }],
  projectFoundingTime: [{ required: true, message: '请输入', type: 'error' }],
  projectFoundingTimeYear: [{ required: true, message: '请输入', type: 'error' }],
  projectSellingPriceMoney: [{ required: true, message: '请输入', type: 'error' }],
  projectAreaCode: [{ required: true, message: '请输入', type: 'error' }],
  projectIndustryValue: [{ required: true, message: '请输入', type: 'error' }],
  projectTypeValue: [{ required: true, message: '请输入', type: 'error' }],
  projectEmployeesNumber: [{ required: true, message: '请输入', type: 'error' }],
  projectSellReasonValue: [{ required: true, message: '请输入', type: 'error' }],
  projectSellSharesProportion: [{ required: true, message: '请输入', type: 'error' }],
  projectStatusValue: [{ required: true, message: '请输入', type: 'error' }],
  // projectTradingStatusValue: [{ required: true, message: '请输入', type: 'error' }],
  projectUserName: [{ required: true, message: '请输入', type: 'error' }],
  // projectUserMobile: [{ required: true, message: '请输入', type: 'error' }],
  projectUserTypeValue: [{ required: true, message: '请输入', type: 'error' }],
  // projectWechatUserNickName: [{ required: true, message: '请输入', type: 'error' }],
  // projectWechatUserMobile: [{ required: true, message: '请输入', type: 'error' }],
};
</script>
